<template>
  <div>
    <div class="container">
      <signRule @showSignRule="toShowSignRule" :showRule="showRule"></signRule>
      <signData @showSignData="toShowSignData" :showSignData="showSignData"></signData>
      <button type="button" class="rule-btn" @click="showRule = !showRule"></button>
      <button type="button" class="showpic-btn" @click="showSignData = !showSignData"></button>
      <button type="button" class="save-btn" @click="save"></button>
      <userInfo class="user-component"></userInfo>
      <sign class="sign-component"></sign>
      <signList class="sign-list-component"></signList>
      <button @click="sign" type="button" :disabled="signTodayStatus === '1'" :class="['sign-btn', signTodayStatus === '1' ? 'signed-btn' : '']"></button>
      <div class="bg-img">
        <div class="bg1"></div>
        <div class="bg2"></div>
        <div class="bg3"></div>
        <div class="bg4"></div>
      </div>
    </div>
    <div v-if="signAllStatus === '1'" class="finished"></div>
  </div>
</template>

<script>
import sign from '@/components/sign'
import userInfo from '@/components/userInfo'
import signList from '@/components/signList'
import signData from '@/components/signData'
import signRule from '@/components/signRule'
import { mapActions, mapState, mapGetters } from 'vuex'
import {updateimgdata} from '@/service/weixin'

export default {
  data () {
    return {
      showSignData: false,
      showRule: false
    }
  },
  components: {
    userInfo,
    sign,
    signList,
    signData,
    signRule
  },
  computed: {
    ...mapState({
      signTodayStatus: state => state.Weixin.signTodayStatus,
      signAllStatus: state => state.Weixin.signAllStatus
    }),
    ...mapGetters(['polygonData'])
  },
  methods: {
    ...mapActions(['QUERY_INDEX', 'SIGN']),
    // ...mapMutations(['QUERY_INDEX']),
    toShowSignData () {
      this.showSignData = !this.showSignData
    },
    toShowSignRule () {
      this.showRule = !this.showRule
    },
    async sign () {
      await this.SIGN({
        parms: {
          openid: '22'
        }
      })
      this.save()
    },
    save () {
      var param = {
        parms: {
          openid: '22',
          imgData: JSON.stringify(this.polygonData)
        }
      }
      updateimgdata(param)
    }
  },
  created () {},
  mounted () {
    this.QUERY_INDEX({
      parms: {
        openid: '22'
      }
    })
  }
}
</script>
<style rel="stylesheet/scss" scoped lang="scss">
@keyframes finished-animate {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

.finished {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../assets/images/bg-finished.png) no-repeat;
  background-size: 100% 100%;
  animation: finished-animate 1s linear infinite;
}
.container {
  height: 100%;
  width: 100%;
  background-color: #c1fbef;

  button {
    border: none;
  }
  .rule-btn {
    position: absolute;
    left: 20px;
    top: 41px;
    width: 106px;
    height: 103px;
    background: url(../assets/images/rule-btn.png) no-repeat;
    background-size: 100% 100%;
    z-index: 1;
  }

  .showpic-btn {
    position: absolute;
    left: 136px;
    top: 41px;
    width: 129px;
    height: 103px;
    background: url(../assets/images/showpic-btn.png) no-repeat;
    background-size: 100% 100%;
    z-index: 1;
  }

  .save-btn {
    position: absolute;
    left: 270px;
    top: 40px;
    width: 100px;
    height: 103px;
    background: url(../assets/images/save-btn.png) no-repeat;
    background-size: 100% 100%;
    z-index: 1;
  }

  .sign-btn {
    position: absolute;
    left: 50%;
    top: 1122px;
    transform: translateX(-50%);
    width: 243px;
    height: 82px;
    background: url(../assets/images/sign-btn.png) no-repeat;
    background-size: 100% 100%;
    z-index: 2;
  }

  .signed-btn {
    background: url(../assets/images/signed-btn.png) no-repeat;
    background-size: 100% 100%;
  }

  .user-component {
    position: absolute;
    right: 0;
    top: 44px;
    z-index: 1;
  }

  .sign-list-component {
    position: absolute;
    left: 90px;
    top: 850px;
    z-index: 1;
  }

  .bg-img {

    @keyframes bg1-animate {
      0% {
        transform: translateX(300%);
      }
      100% {
        transform: translateX(-100%);
      }
    }

    @keyframes bg2-animate {
      0% {
        left: 48%;
        opacity: 0.8;
      }
      50% {
        left: 20%;
        opacity: 0.3;
      }
      100% {
        opacity: 1;
        left: -14%;
      }
    }

    @keyframes bg3-animate {
      0% {
        left: 11px;
      }
      10% {
        left: -14%;
        opacity: 0;
      }
      10.01% {
        left: 100%;
        opacity: 1;
      }
      100% {
        left: 11px;
      }
    }

    .bg1 {
      position: absolute;
      // left: 387px;
      top: 45px;
      width: 188px;
      height: 76px;
      background: url(../assets/images/bg1.png) no-repeat;
      background-size: 100% 100%;
      animation: bg1-animate 30s linear infinite;
    }
    .bg2 {
      position: absolute;
      // left: 337px;
      top: 84px;
      width: 205px;
      height: 126px;
      background: url(../assets/images/bg2.png) no-repeat;
      background-size: 100% 100%;
      animation: bg2-animate 24s linear infinite;
    }
    .bg3 {
      position: absolute;
      // left: 11px;
      top: 416px;
      width: 120px;
      height: 49px;
      background: url(../assets/images/bg3.png) no-repeat;
      background-size: 100% 100%;
      animation: bg3-animate 30s linear infinite;
    }
    .bg4 {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 750px;
      height: 420px;
      background: url(../assets/images/bg4.png) no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
